/* =s Reset (by YUI 3) */
html {
    color: #000;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset, img {
    border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: normal;
}
li {
    list-style: none;
}
caption, th {
    text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
q:before, q:after {
    content: '';
}
abbr, acronym {
    border: 0;
    font-variant: normal;
}
sup {
    vertical-align: text-top;
}
sub {
    vertical-align: text-bottom;
}
input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}
input, textarea, select {
    *font-size: 100%;
}
legend {
    color: #000;
}
header, section, footer, nav {
    display: block;
}
/* =e Reset */

body {
    background: url(../img/background.jpg) no-repeat;
    font-family: "Microsoft YaHei";
    min-width:1100px;
}

#page {
    position: relative;
    width: 1080px;
    margin: 0px auto;
    padding-top: 70px;
}

#logos {
    position: absolute;
    top: 20px;
    right: 100px;
}

#title {

    width: 90%;
    margin: 0px auto;
    color: white;
}

#title p {
    display: block;
    margin-top: 20px;
    padding-right: 50px;
}

#main {
    width: 1000px;
    height: 805px;
    background: url(../img/main_background.png) no-repeat;
    margin: 26px auto;
    padding: 7px 10px 0px 10px;
}

#yearEvents {
    position: relative;
    width: 100%;
    height: 793px;
}

#yearEvents .eventsWrapper {
    position: relative;
    width: 100%;
    height: 709px;
    overflow: hidden;
}

#yearEvents .events {
    position: relative;
    width: 100000px;
    /*
    -webkit-transition: left .3s ease-out;
        -moz-transition: left .3s ease-out;
        -o-transition: left .3s ease-out;
        transition: left .3s ease-out;*/
    
}

#yearEvents .events .oneDay {
    position: relative;
    bottom: 0px;
    float: left;
    width: 200px;
    height: 706px;
}

#yearEvents .events .oneDay:nth-child(2n+2) {
    background-color: rgba(255,255,255,0.2);
}

#yearEvents .events .oneDay .oneDayInner {
    width: 100%;
    position: absolute;
    bottom: 0px;
}

#yearEvents .events .oneDay .event {
    background-color: rgb(200,185,162);
    width: 184px;
    margin: 0px auto 20px auto;
    border: 2px solid rgb(52,41,13);
}

#yearEvents .events .oneDay .event .date {
    position: relative;
    top: -10px;
    left: -5px;
    color: rgb(239,216,175);
    font-weight: bold;
    width: 104px;
    height:24px;
    background:url(../img/date_background.png);
    line-height:24px;
    text-indent: 10px;
}

#yearEvents .events .oneDay .event .title {
    padding:0px 10px 10px 10px;
    min-height: 30px;
}

#yearEvents .events .oneDay .event .title a{
    text-decoration:none;
    color:black;
}

#yearEvents .events .oneDay .event .picture {
    height: 157px;
}

#yearEvents .events .oneDay .event .picture img {
    width: 183px;
    height: 157px;
}

#yearEvents .events .oneDay .subDate {
    background-color: rgba(107,26,107,0.8);
    height: 60px;
    width: 100%;
    line-height: 60px;
    text-align: center;
    color: rgb(255,235,194);
    font-size: 20px;
    font-weight: bold;
}

#yearEvents .events .oneDay .subDate span.number {
    font-size: 35px;
}

#yearEvents svg{
}


#yearEvents svg text{
}

#yearEvents svg circle {
    cursor: pointer;
}


#yearEvents .svgWrapper {
    width: 1000px;
    overflow: hidden;
    position: absolute;
    bottom: 0px;
    left: 0px;
}

#yearEvents .timeLineLeft {
    position: absolute;
    bottom: 0px;
    left: -45px;
    z-index: 1000;
}

#yearEvents .timeLineRight {
    position: absolute;
    bottom: 0px;
    right: -45px;
    z-index: 1000;
}

#yearEvents .timeLineLeft:hover,#yearEvents .timeLineRight:hover {
    cursor: pointer;
    opacity: 0.8;
}

#yearEvents .eventsLeft {
    position: absolute;
    bottom: 400px;
    left: -1px;
    z-index: 1000;
}

#yearEvents .eventsRight {
    position: absolute;
    bottom: 400px;
    right: -1px;
    z-index: 1000;
}

#yearEvents .eventsLeft:hover, #yearEvents .eventsRight:hover {
    cursor: pointer;
    opacity: 0.8;
}

#yearEvents .currentPosition {
}

#yearEvents .tips {
    display: none;
    position: absolute;
    width: 120px;
    min-height: 60px;
    top: 0px;
    left: 0px;
    background-color: white;
    padding: 5px;
}

#yearEvents .tips .date {
    display: block;
    font-weight: bold;
}

#yearEvents .tips .title {
    font-size: 13px;
}

#yearEvents .tips .arrow {
    position: absolute;
    bottom: -25px;
    left: 80px;
    color: white;
    font-size: 40px;
}

#yearEvents .tips .arrow a {
    text-decoration: none;
    color: white;
}

@keyframes myfirst
{
0% {left: 180px;}
50% {left: 160px;}
100% {left:180px;}
}

left myfirst /* Firefox */
{
0% {left: 180px;}
50% {left: 160px;}
100% {left:180px;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {left: 180px;}
50% {left: 160px;}
100% {left:180px;}
}

@-o-keyframes myfirst /* Opera */
{
0% {left: 180px;}
50% {left: 160px;}
100% {left:180px;}
}

#timeLineTips{
    position:absolute;
    left: 0px;
    top:0px;
    width:144px;
    padding:5px 10px;
    background-color:rgb(200,185,162);
    border: 2px solid rgb(52,41,13);
}

#timeLineTips span{
    display:block;
    font-size: 13px;
}

#timeLineTips img.arrow {
    position:absolute;
    left:160px;
    top:0px;
    display:block;
    animation: myfirst 1s infinite linear;
    -moz-animation: myfirst 1s infinite linear; 
    -webkit-animation: myfirst 1s infinite linear;  
    -o-animation: myfirst 1s infinite linear;  
}

#timeLineTips img.close{
    position:absolute;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    font-size: 0;
}
.clearfix {
    display: inline-block;
}
* html
.clearfix {
    height: 1%;
}
.Clearfix {
    display: block;
}

